<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
</head>
<body>
<div id="app">
    <input v-model="message" v-on:keyup.enter="add" />
    <ul>
     <li v-for="(item,index) in list">
         {{index}}{{item}}
         <button @click="delet(index)" >X</button>

     </li>

    </ul>
    <span v-if="list.length>0"> {{list.length}} items left</span>
    <button @click="clear">clear</button>

    <button  value="get请求" class="get">get请求</button>
    <button  value="post请求" class="post"></button>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    document.querySelector(".get").onclick=function () {
     axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (response) {
     console.log(response);
     })
    }
    var app = new Vue({
        el:'#app',
        data:{
            message:"hello world",
            list:['吃饭饭','睡觉觉','写代码']
        },
    methods:{
            add:function () {
                 this.list.push(this.message);
                 this.message="";
            },
            delet:function (index) {
                this.list.splice(index,1)


            },
        clear:function () {
           this.list=[];
        }
    }

    });
</script>

</body>
</html>